<template>
  <div>
    <bfe-dialog 
      title="交易明细展示字段配置" 
      :visible.sync="showFlag"
      :close-on-click-modal="false" 
      append-to-body
      @close="handCancel"
    >
      <div class="content">
        <div class="transfer-container">
          <div class="leftBlock">
                <div >交易明细展示字段</div>
                <bfe-transfer v-model="leftTransFerValue" :data="leftTransFerData" :titles="['未选字段', '已选字段']" target-order="push" moveable />
          </div>
          <div class="rightBlock">
            <div>下载字段</div>
            <bfe-transfer v-model="rightTransFerValue" :data="rightTransFerData" :titles="['未选字段', '已选字段']" target-order="push" moveable />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <bfe-button type="primary" v-if="type === 'edit'" @click="showFlag = false">{{ $t('stm.btn.cancel') }}</bfe-button>
        <bfe-button type="primary" v-if="type === 'edit'" :loading="loading" @click="handSave">{{ $t('stm.btn.save') }}</bfe-button>
      </span>
    </bfe-dialog>
  </div>
</template>

<script>
import mixinList from '@stm/mixins'

export default {
  mixins: [mixinList],
  data() {
    return {
	    showFlag: false,
	    type: '',
	    loading: false,
		pageData: {}, // 选中的数据
		leftTransFerData: [],
		leftTransFerValue: [],
		rightTransFerData: [],
		rightTransFerValue: []
    }
  },
  methods: {
    initPage(type, row){
	     this.type = type;
	     this.showFlag = true;
	     this.pageData = {...row}
	     this.getPageData()
    },

    handCancel(){
      this.pageData = {}
      this.showFlag = false
    },
    handSave(){
      if(this.leftTransFerValue.length < 1 ) {
        this.$message.error('至少选择一个交易字段')
        return
      }
      if( this.rightTransFerValue.length < 1) {
        this.$message.error('至少選擇一個下載字段')
        return
      }
      const params = {
        optCode: 'STM002GET2002',
        payload: {
	        bankId: this.pageData.bankId,
			    caseId: this.pageData.caseId,
	        config: this.leftTransFerValue?.join(','),
			    download: this.rightTransFerValue?.join(',')
        }
      }
        this.$p2svr(this.$api['_01_STM002GET2000'] , 'RequestPoAuth', params).then(res => {
              if(res.respStatus === '00'){
                this.handCancel()
                this.$emit('doSearch')
          }
	      }).finally(() => {
	        this.loading = false
	      })
    },
    // 查询检索详情
	getPageData(){
      const params = {
        optCode: 'STM002GET2001',
        payload: {
          bankId: this.pageData.bankId,
		      caseId: this.pageData.caseId,
        }
      }
      this.$p2svr(this.$api['_01_STM002GET2000'] , 'RequestPoAuth', params).then(res => {
            const {configBankCasesFirstColumn = [], configBankCasesSecondColumn, configBankCasesThreeColumn = [],configBankCasesFourthColumn} = res.payload
            this.leftTransFerData = configBankCasesFirstColumn.concat(configBankCasesSecondColumn ?? [])?.map(item => {return {label: item?.property, key: item?.columnName,  disabled: this.type === 'detail'} }) || []
            this.rightTransFerData = configBankCasesThreeColumn.concat(configBankCasesFourthColumn ?? [])?.map(item => {return {label: item?.property, key: item?.columnName, disabled: this.type === 'detail'} }) || []
            this.leftTransFerValue = configBankCasesSecondColumn?.map(item => item.columnName) || []
			      this.rightTransFerValue = configBankCasesFourthColumn?.map(item => item.columnName) || []
	      })
    },
  },
}
</script>

<style lang="less" scoped>
.content{
    display: flex;
    flex-direction: column;
    gap:24px
}
.transfer-container {
    display: flex;
    justify-content: space-between;
    gap: 24px;    
}
.leftBlock{
    transition: all 0.3s;
    flex: 1;
}
.leftBlockHeader{
    display: flex;
    padding: 0 12px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.rightBlock {
    flex: 1;
}
/deep/.giop-dialog--small{
    width:50% !important;
    margin-left: -25% !important;
    max-height: 70vh;
    height: 70%;
}
/deep/.giop-dialog__body {
    max-height: calc(70vh - 99px);
    height: 100%;
}
/deep/.giop-dialog__body {
    max-height: calc(70vh - 99px);
    height: 100%;
}
</style>